@extends('layout/default')

@section('content')
<style>
    input[type="checkbox"] {
        visibility: hidden;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }

    input[type="checkbox"] + label {
        background: url("{{asset('/images/checkbox1.png')}}") no-repeat;
        background-size: 20px 20px;
        padding-left: 18px;
        color: #ccc
    }

    input[type="checkbox"]:checked + label {
        background-position: 0 -48px;
        background: url("{{asset('/images/checkbox2.png')}}") no-repeat;
        background-size: 20px 20px;
        color: #ccc
    }

    input[type="checkbox"]:disabled + label {
        background-position: 0 -48px;
        background: url("{{asset('/images/checkbox3.png')}}") no-repeat;
        background-size: 20px 20px;
        color: #ccc
    }
</style>
<div class="container ">
    <div clas="row ">
        <form class="form-horizontal" style="margin-top: 2em" method="post">
            <input type="hidden" name="_token" value="{{csrf_token()}}"/>
            <input type="hidden" name="details" id="details"/>
            <input type="hidden" name="price" value="0" >

            <div class="form-group">
                <label for="SSiteID" class="col-sm-2 control-label">场馆：</label>

                <div class="col-sm-10">
                    <select class="form-control" id="SSiteID" name="SSiteID">
                        <option value="">--请选择--</option>
                        <option value="1">金桥</option>
                        <option value="2">万寿</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="type" class="col-sm-2 control-label">类型：</label>

                <div class="col-sm-10">
                    <select class="form-control" id="type">
                        <option value="">--请选择--</option>
                        @foreach(DB::table('tspacetype')->get() as $v)
                        <option value="{{$v->STID}}">{{$v->STName}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="date" class="col-sm-2 control-label">日期：</label>

                <div class="col-sm-10">
                    <input type="text" class="form-control" id="date" value="{{$today}}" name="TODDate" readonly
                           class="form_datetime">
                </div>
            </div>
            <div class="form-group" style="display: none;">
                <label for="type" class="col-sm-2 control-label">是否全场：</label>

                <div class="col-sm-10">
                    <select class="form-control" id="basketball" name="basketball">
                        <option value="">--请选择--</option>
                        <option value="1">半场</option>
                        <option value="2">全场</option>
                    </select>
                </div>
            </div>
            <div class="form-group" style="display: none;">
                <label for="type" class="col-sm-2 control-label">大小场：</label>

                <div class="col-sm-10">
                    <select class="form-control" id="soccer" name="soccer">
                        <option value="">--请选择--</option>
                        <option value="1">小场</option>
                        <option value="2">大场</option>
                    </select>
                </div>
            </div>
            <div id="msgs">

            </div>
            <div>
                预定信息:
                <div id="orders"></div>
            </div>
            <button type="submit" class="btn btn-primary col-xs-12" style="height: 3em;margin-top: 3em">提交订单</button>
        </form>
    </div>
</div>

@endsection
@section('scripts')
<script>
    $(function () {
        $("#date").datetimepicker({
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
            minView: 'month',
            startView: 'month'
        });
        $("#type,#SSiteID,#basketball,#soccer").change(function () {
            if ($("#type").val() == 2) {
                $("#basketball").parent().parent().show();
            } else {
                $("#basketball").parent().parent().hide();
            }
            if ($("#type").val() == 3) {
                $("#soccer").parent().parent().show();
            } else {
                $("#soccer").parent().parent().hide();
            }
            getDates();
        })
        $("#date").datetimepicker('setStartDate', $("#start_time").val()).on('changeDate', function (ev) {
            getDates();
            $('#date').datetimepicker('hide')
        });
        $(document).on('click', '[name="orders[]"]', function () {
            $("#orders").html('');
            var temp = '';
            var price = 0;
            $("[name='orders[]']").each(function () {
                if ($(this).prop("checked") == true) {
                    //console.log($(this).val());
                    temp += $(this).attr("data-space") + '-' + $(this).val() + ',';
                    $("#orders").append("· " + $(this).val() + '  ' + $(this).attr("data-price") + '元<br/>');
                    price += parseInt($(this).attr("data-price"));
                }
            })
            $('input[name="price"]').val(price)
            $("#orders").append('小计 :' + price + ' 元');
            $("#details").val(temp);
        });
                @if (isset($today))
            $('#date').datetimepicker('setStartDate', "{{$today}}");
                @endif
        function getDates() {
            $("#orders").html('');
            $("#msgs").html('');
            if ($("#type").val() == 2 && $("#basketball").val() <= 0) {
                return false;
            }
            if ($("#type").val() == 3 && $("#soccer").val() <= 0) {
                return false;
            }
            if ($("#type").val() <= 0 || $("#SSiteID").val() <= 0) {
                $("#msgs").html('');
                return false;
            }
            $.ajax({
                type: "GET",
                async: false,
                url: "{{URL::to('space/msgs')}}",
                data: {date: $("#date").val(), type: $("#type").val(), SSiteID: $("#SSiteID").val(), basketball: $("#basketball").val(), soccer: $("#soccer").val()},
                dataType: "html",
                cache: false,
                success: function (data) {
                    $("#msgs").html(data);
                }
            });
        }

    });

</script>
@endsection
